<template>
  <div class="wrapper">
    <van-nav-bar safe-area-inset-top placeholder>
      <template #title>
        <van-col>
          <van-icon name="guide-o" size="20" color="red" />
        </van-col>
        <van-col>角色速查</van-col>
      </template>
    </van-nav-bar>

    <!-- 快速查询 -->
    <van-field is-link readonly label="选择角色" @click="quickSelectShow = true" />
    <role-group-view :groupViewShow="quickSelectShow" v-on:close="quickSelectShow = false"
      v-on:select="onQuickSelect" />

    <el-row class="iframe-row border-left border-right">
      <el-col :span="22" :offset="1">
        <!-- iframe非同源页面不能直接操作dom  通过外层overflow:hidden iframe absolute -->
        <!-- 设置iframe上移200px挡住上面操作按钮和留白 -->
        <!-- 设置iframe高度比外层高450px挡住隐藏底部广告 -->
        <iframe id="link-frame"></iframe>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { TeamServer, LoadServer } from '../server/servers';
  import RoleGroupView from './popups/RoleGroupView';
  
  export default {
    name: 'Load',
  
    components: { RoleGroupView },
  
    mounted() {
      this.autoSetHeight();
  
      let vm = this
      setTimeout(() => {
        vm.getAllRoles();
        vm.getAllBoss();
        // vm.setIframeSrc();
      }, 2000);
    },
  
    data: () => ({
      allRoles_list: [],
      boss_list: [],
      quickSelectShow:false,
  
    }),
  
    methods: {
      autoSetHeight() {
        // let frameDom = document.getElementById("link-frame");
        // let colDom = frameDom.parentElement;
        // let mid = document.getElementsByClassName("mid")[0];
  
        // let height = mid.getBoundingClientRect().bottom - colDom.getBoundingClientRect().top
        // colDom.style.height = height + "px";
        // frameDom.style.height = height + 450 + "px";
      },
  
      getAllRoles() {
        console.log("MyTeam.vue getAllRoles");
        this.allRoles_list = TeamServer.queryAllRoles();
        console.log(this.allRoles_list);
      },
  
      getAllBoss() {
        console.log("MyTeam.vue getAllBoss");
        this.boss_list = TeamServer.queryAllBoss();
        console.log(this.boss_list);
      },
  
      onQuickSelect(item){
        // console.log("选择了角色",item);
        this.setIframeSrc(item.url);
      },
  
      setIframeSrc(url) {
        url = url || "https://www.wolai.com/skyey-engrave/u7XaewuRQ9mJQGVoNZwSSc";
        document.getElementById("link-frame").src = url;
      }
    }
  }
  </script>
  
  <style scoped>
  .iframe-row .el-col {
    overflow: hidden;
    position: relative;
    height: 800px;
    /* border: 1px solid #F3F3F3; */
    margin-top: 20px;
  }
  
  #link-frame {
    width: 99.9%;
    height: 1200px;
    position: absolute;
    top: -170px;
    left: 0;
    border: none;
  }
  </style>